<template>
<div>
  <!--     面包屑导航区域-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
<!--  卡片区域-->
  <el-card>
    <el-row>
      <el-col>
        <el-button @click="dialogVisible = true" type="primary">添加分类</el-button>
      </el-col>
    </el-row>
<!--    表格-->
<!--    :selection-type去掉复选框-->
<!--    :expand-type去掉展开行-->
<!--    :columns每一列的数据绑定-->
<!--    show-index索引-->
    <tree-table class="treeTable" border index-text="#" show-index :expand-type="false" :selection-type="false" :data="cateList" :columns="columns">
    <template slot="isok" slot-scope="scope">
      <i v-if="!scope.row.deleted" style="color: lightgreen;" class="el-icon-success"></i>
      <i v-if="scope.row.deleted" style="color: red" class="el-icon-error"></i>
    </template>
<!--      排序-->
      <template slot="order" slot-scope="scope">
        <el-tag v-if="scope.row.level===0" size="mini">一级</el-tag>
        <el-tag v-if="scope.row.level===1" size="mini" type="success">二级</el-tag>
        <el-tag v-if="scope.row.level===2" size="mini" type="warning">三级</el-tag>
      </template>
      <template slot="opt" >
        <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
      </template>
    </tree-table>
<!--    分页-->
    <el-pagination
      style="text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[1, 2, 3]"
      :page-size="num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
<!--  添加分类的对话框-->
  <el-dialog
    title="添加分类"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
<!--    表单-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="分类名称：" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类：" prop="name">
      </el-form-item>
    </el-form>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: 'index',
  created () {
    this.getCateList()
  },
  data () {
    return {
      // 商品分类的数据列表，默认为空
      cateList: [],
      total: 0,
      num: 0,
      size: 1,
      // 为table指定列
      columns: [
        {
          label: '分类名称',
          prop: 'name'
        },
        {
          label: '是否有效',
          // 表示，将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用模板名称
          template: 'isok'
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      dialogVisible: false,
      ruleForm: {
        name: '',
        level: 0
      },
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getCateList () {
      const dt = [
        {
          pagenum: 1,
          pagesize: 3,
          result: [
            {
              cat_id: 1,
              name: '大家电',
              deleted: false,
              level: 0,
              children: [
                {
                  cat_id: 1,
                  name: '电视',
                  deleted: false,
                  level: 1,
                  children: [
                    {
                      cat_id: 1,
                      deleted: false,
                      level: 2,
                      name: '电视'
                    },
                    {
                      cat_id: 1,
                      deleted: false,
                      level: 2,
                      name: '空调'
                    }
                  ]
                },
                {
                  cat_id: 1,
                  deleted: true,
                  level: 1,
                  name: '空调'
                }
              ]
            },
            {
              cat_id: 2,
              deleted: false,
              level: 0,
              name: '苏宁云购'
            },
            {
              cat_id: 3,
              deleted: true,
              level: 0,
              name: '了巨大'
            }
          ],
          total: 38
        },
        {
          pagenum: 2,
          pagesize: 3,
          result: [
            {
              cat_id: 1,
              name: '数码',
              deleted: false,
              level: 0,
              children: [
                {
                  cat_id: 1,
                  name: '疏解',
                  deleted: false,
                  level: 1,
                  children: [
                    {
                      cat_id: 1,
                      deleted: false,
                      level: 2,
                      name: '世界'
                    },
                    {
                      cat_id: 1,
                      deleted: false,
                      level: 2,
                      name: 'hello'
                    }
                  ]
                },
                {
                  cat_id: 1,
                  deleted: true,
                  level: 1,
                  name: '空调'
                }
              ]
            },
            {
              cat_id: 2,
              deleted: false,
              level: 0,
              name: '世界咯'
            },
            {
              cat_id: 3,
              deleted: true,
              level: 0,
              name: '不清楚'
            }
          ],
          total: 38
        }
      ]
      const data = dt.filter(m => m.pagenum === this.size)
      this.cateList = data[0].result
      this.num = data[0].pagesize
      this.total = data[0].total
    },
    handleSizeChange (newSize) {
      this.num = newSize
      this.getCateList()
    },
    handleCurrentChange (newPage) {
      this.size = newPage
      this.getCateList()
    },
    handleClose () {
    }
    // getCateList () {
    // }
  }
}
</script>

<style scoped>
.treeTable {
  margin-left: 15px;
  margin-top: 15px;
}
</style>
